<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="12">
          <a-col
            v-for="paramItem in FILTER_PARAMS"
            :key="paramItem.name"
            v-bind="paramItem.wrapperCol || filterItemDefaultWrapperCol"
          >
            <a-form-item>
              <component
                :is="paramItem.type ? paramItem.type : 'a-input'"
                v-model="queryParam[paramItem.name]"
                :placeholder="paramItem.placeholder"
                v-bind="paramItem.customProps || {}"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="filterItemDefaultWrapperCol">
            <span class="table-page-search-submitButtons">
              <a-button
                type="primary"
                @click="$refs.table.refresh(true)"
              >查询</a-button>
              <a-button
                style="margin-left: 8px"
                @click="() => queryParam = {}"
              >重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button
        :disabled="!selectedRowKeys.length"
        type="primary"
        icon="download"
        @click="handleExportExcel"
      >导出</a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      :rowKey="(record, index)=> index"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
      :scroll="{ x: true}"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
    >
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import StepByStepModal from '../../modules/StepByStepModal'
import CreateForm from '../../modules/CreateForm'
import { getBillList } from '@/api/manage'
import { FILTER_PARAMS, BILL_LIST_COLUMNS } from './constants/bill.js'
import { exportJsonToExcel, getHeaderAndDataFromTable } from '@/utils/exportExcel'

export default {
  name: 'TableListPage',
  components: {
    STable,
    CreateForm,
    StepByStepModal
  },
  data() {
    return {
      filterItemDefaultWrapperCol: { md: 3, sm: 6 },
      FILTER_PARAMS,
      queryParam: {},
      columns: BILL_LIST_COLUMNS,
      loadData: parameter => {
        let filterParams = this.queryParam
        if (this.queryParam.timeRange) {
          filterParams = Object.assign({}, this.queryParam, {
            // startTime: `${this.queryParam.timeRange[0].format('YYYY-MM-DD')} 00:00:00`, 
            // endTime: `${this.queryParam.timeRange[1].format('YYYY-MM-DD')} 23:59:59`
            startTime: `${this.queryParam.timeRange[0]} 00:00:00`,
            endTime: `${this.queryParam.timeRange[1]} 23:59:59`
          })
        }
        delete filterParams.timeRange
        console.log(filterParams, parameter)

        if (filterParams.startTime === 'undefined 00:00:00' || filterParams.endTime === 'undefined 23:59:59') {
          filterParams = {}
        }

        return getBillList(Object.assign(parameter, filterParams))
          .then(res => {
            return res.resData
          })

      },
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleExportExcel() {
      const { header, data } = getHeaderAndDataFromTable(
        BILL_LIST_COLUMNS,
        this.selectedRows
      )

      exportJsonToExcel({
        header,
        data,
        filename: `账单列表_${+new Date()}`
      })
    }
  }
}
</script>
